<template>
  <div>
    <!-- 评论列表 -->
    <comment :data="commentData" :scroll-bottom="textareaFocus"></comment>
    <!-- 评论 -->
    <div class="comment mgb15">
      <!-- 列表 -->
      <div>评论：</div>
      <el-form inline :model="query" status-icon :rules="rules" ref="userForm">
        <el-input
          type="textarea"
          class="mgb15"
          ref="textarea"
          v-model.trim="query.commentContent"
        ></el-input>
        <el-form-item label="昵称" prop="userName">
          <el-input
            style="width: 170px"
            class="border-bottom"
            placeholder="请输入您的昵称"
            v-model.trim="query.userName"
          ></el-input>
        </el-form-item>
        <el-form-item label="网址">
          <el-select
            class="border-bottom"
            v-model="query.httpType"
            style="width: 85px"
          >
            <el-option
              v-for="item in httpArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            class="border-bottom"
            placeholder="请输入您的网址"
            v-model.trim="query.url"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            class="border-bottom"
            placeholder="请输入您的联系邮箱"
            v-model.trim="query.email"
          ></el-input>
        </el-form-item>
        <el-button type="success" :disabled="!hasValid">发表评论</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import Comment from "@/components/Comment/index.vue";
import { validEmail } from "@/utils/validate";

const validateEmail = (rule, value, callback) => {
  if (!value) callback(new Error("邮箱必填"));
  else if (validEmail(value)) callback();
  else callback(new Error("邮箱格式不正确!"));
};

/**
 * 该组件用作需要评论列表的页面
 *
 * 由 评论列表 + 评论框 组成
 */
export default {
  components: {
    Comment
  },
  props: {
    commentData: {
      // 评论列表数据
      type: Array,
      required: true
    }
  },
  data() {
    return {
      rules: {
        userName: [
          { message: "昵称必填", trigger: "change", required: true },
          { min: 3, max: 8, message: "长度在 3 到 8 个字符", trigger: "change" }
        ],
        email: [{ validator: validateEmail, trigger: "change", required: true }]
      },
      time: new Date(),
      hasValid: false,
      query: {
        commentContent: "",
        httpType: "http",
        url: "",
        userName: "",
        email: ""
      },
      httpArr: [
        { label: "http", value: "http" },
        { label: "https", value: "https" }
      ]
    };
  },
  methods: {
    textareaFocus() {
      this.$refs.textarea.focus();
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/.el-textarea__inner {
  height: 150px;
  font-size: 12px;
}

.mgb15 {
  margin-bottom: 15px;
}
</style>
